<template>
    <div class="progress" :style="{ '--progress': progress + '%', '--color': getColor(progress) }">
        <div class="progress-bj">
            <div class="progress-bar"></div>
            <div class="progress-text">{{ text }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps(['progress', 'text'])
function getColor(progress: number) {
    if (progress > 70) {
        return "#e74c3c"
    }
    if (progress > 50) {
        return '#f1c40f'
    }
    return '#2ecc71'

}
</script>

<style scoped lang="scss">
.progress {
    width: 100%;

    .progress-bj {
        border-radius: 8px;
        height: 30px;
        width: 100%;
        position: relative;
        background-color: #dce5f0;

        .progress-bar {
            z-index: 1;
            border-radius: 5px;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: var(--progress);
            background-color: var(--color);
            animation: progress-in 1s ease;

            @keyframes progress-in {
                from{
                    width: 0%;
                }
                to {
                    width: var(--progress);
                }
            }

            &:after {
                content: "";
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #FFF;
                border-radius: .28rem;
                -webkit-animation: progress-active 2s ease infinite;
                animation: progress-active 2s ease infinite;

                @keyframes progress-active {
                    0% {
                        opacity: .3;
                        width: 0
                    }

                    to {
                        opacity: 0;
                        width: 100%
                    }
                }

            }
        }

        .progress-text {
            z-index: 2;
            position: absolute;
            left: 10px;
            top: 0;
            height: 100%;
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 16px;
        }
    }
}
</style>